<template>
  <view class="container">
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item,index) in list">
        <view class="swiper-item">
          <image :src="'../../static'+item.icon" mode="" style="width: 100%; height: 240px;"></image>
        </view>
      </swiper-item>
    </swiper>
    <uni-section title="菜品类别" sub-title="" type="square">
      <uni-grid :column="4">
        <uni-grid-item v-for="item,index in typelist">
          <view style="display: flex; flex-direction: column; align-items: center; padding-top: 10px;">
            <image :src="'../../static/'+item.icon" style="width: 100rpx; height: 100rpx; " mode=""></image>
            <view>{{item.typename}}</view>
          </view>
        </uni-grid-item>
      </uni-grid>
    </uni-section>
    <uni-section title="乡村新闻" sub-title="" type="square">
      <view class="tab-container">
        <view class="tab-item" @click="categoryChange" :data-index="item.id-1"
          :class=" {'tab-active':activeIndex==item.id-1} " v-for="item,index in categorylist">
          {{item.categoryname}}
        </view>
      </view>
      <swiper :current="activeIndex" @change="activeIndexChange" style="height:200px">
        <swiper-item v-for="category in categorylist" style="width: 100%;">
          <view class="swiper-item">
            <uni-list>
              <uni-list-item v-for="(item,index) in newslist.filter((i)=> i.type==category.categoryname)" :key="item.id"
                :title="item.title" :to='"../xinwen/xinwen?id="+item.id'>
              </uni-list-item>
            </uni-list>
          </view>
        </swiper-item>
      </swiper>

    </uni-section>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        "categorylist": [], // 待遍历列表
        "activeIndex": 0, // 选中项编号
        "newslist": [], // 新闻列表
        "list": [{
            "id": 1,
            "name": "烤鸭",
            "type": "肉类",
            "icon": "/images/1.png",
            "description": "烤鸭是北京和南京的一道特色名菜,属于北京菜或金陵菜,该菜品以色泽红艳,肉质细嫩,味道醇厚,肥而不腻的特色,被誉为“天下美味”而驰名中外,其色泽略黄,柔软淡香,夹卷其他荤素食物食用,为宴席常用菜点,更是家常风味美食。",
            "price": 88.5
          },
          {
            "id": 2,
            "name": "回锅肉",
            "type": "肉类",
            "icon": "/images/2.png",
            "description": "回锅肉，是一种四川传统菜式中家常（味型）菜肴的代表菜肴之一，属于川菜系列。制作原料主要有猪后臀肉（二刀肉）、青椒、蒜苗等，口味独特，色泽红亮，肥而不腻。回锅肉起源四川农村地区。古代时期称作油爆锅，四川地区大部分家庭都会制作。所谓回锅，就是再次烹调的意思。",
            "price": 12.5
          },
          {
            "id": 3,
            "name": "茄子",
            "type": "蔬菜",
            "icon": "/images/3.png",
            "description": "油淋茄子以茄子、鸡蛋、肉末、粉丝等为食材制成的一道精美的平民美食。",
            "price": 20.5
          },
          {
            "id": 4,
            "name": "宫保鸡丁",
            "type": "肉类",
            "icon": "/images/4.png",
            "description": "宫保鸡丁选用鸡肉为主料，佐以花生米、辣椒等辅料烹制而成；红而不辣、辣而不猛、香辣味浓、肉质滑脆；其入口鲜辣，鸡肉的鲜嫩可以配合花生的香脆。",
            "price": 34.5
          }
        ],
        "typelist": [{
            "id": 1,
            "typename": "鱼类",
            "icon": "/images/鱼.png"
          },
          {
            "id": 2,
            "typename": "肉类",
            "icon": "/images/生鲜.png"
          },
          {
            "id": 3,
            "typename": "菌菇类",
            "icon": "/images/菌菇类.png"
          },
          {
            "id": 4,
            "typename": "豆制品",
            "icon": "/images/豆制品.png"
          },
          {
            "id": 5,
            "typename": "蔬菜",
            "icon": "/images/蔬菜.png"
          },
          {
            "id": 6,
            "typename": "酒水",
            "icon": "/images/酒水.png"
          },
          {
            "id": 7,
            "typename": "火锅",
            "icon": "/images/火锅.png"
          },

          {
            "id": 8,
            "typename": "水果",
            "icon": "/images/水果.png"
          }
        ],

      }
    },

    methods: {
      loadData() {
        uni.request({
          url: this.$baseUrl + 'category/list',
          method: 'POST',
          data: {},
        }).then(res => {
          this.categorylist = res.data.data;
          return uni.request({
            url: this.$baseUrl + 'news/list',
            method: 'POST',
            data: {},

          });
        }).then(res => {
          this.newslist = res.data.data
        }).catch(error => {
          console.error('Error while fetching data:', error);
        })
      },
      activeIndexChange(e) {
        console.log(e);
        this.activeIndex = e.detail.current
      },
      categoryChange(e) {
        this.activeIndex = e.currentTarget.dataset.index;
      }
    },
    onLoad() {
      this.loadData();
    },
  }
</script>

<style>
  .tab-container {
    width: 100%;
    height: 80rpx;
    display: flex;
    flex-direction: row;
  }

  .tab-item {
    flex: 1;
    text-align: center;
    line-height: 80rpx;
  }

  .tab-item.tab-active {
    border-bottom: red solid 3px;
    background-color: #EEE;
  }
</style>